/* 1.变量 */
$bg:red;
div{
    background: $bg;
}
/* 2.嵌套 */
.container{
    background: red;
    .child{
        font-size: 12px;
    }
    &:hover{
        color: yellow;
    }
}
/* 3.mixin */
@mixin wh() {
    width: 100px;
    height: 100px;
}
.one{
    @include wh()
}
/* 4.继承 */
.block{
    width: 200px;
    height: 200px;
}
.nav{
    @extend .block;
}

/* 5.if-else */
@mixin v-h($b:true) {
    @if $b{
        display: block;
    }
    @else{
        display: none;
    }
}
.visible{
    @include v-h()
}
.hidden{
    @include v-h(false)
}

/* 6.for */
@for $i from 1 through 12{
    .col-#{$i}{
        width: 100%12*$i;
    }
}
/* 7.while */
$n:12;
@while $n>0 {
    .col-md-#{$n}{
        width:100%/12*$n;
    }
    $n:$n-1;
}
